<!DOCTYPE html>
<!-- html标签里的lang属性指的是页面的使用语言 -->
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap V3 中文网</title>
    <!-- link标签可以引用外部的css文件 -->
    <link rel="stylesheet" href="./css/style01.css">
</head>

<body>

    <!-- 首先是上面这几个标签 这个是注释不会影响页面 注释要多写 我给你写一下这个页面 -->
    <!-- 页面是分块的，写的时候要注意 -->
    <!-- class指代css的选择器使用 -->
    <div class="head">
        <ul class="head_link">
            <li><a href="#">Bootstrap 中文文档</a></li>
            <li><a href="#">入门</a></li>
            <li><a href="#">全局css样式</a></li>
            <li><a href="#">组件</a></li>
            <li><a href="#">javascript插件</a></li>
            <li><a href="#">定制</a></li>
            <li><a href="#">网站实例</a></li>
        </ul>
        <span class="B_icon">B</span>
        <p>
            Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
        </p>
        <button>
            下载 Bootstrap
        </button>
        <span class="declear">
            当前版本： v3.4.1 | 文档更新于：2021-06-10
        </span>
    </div>

    <!-- body部分 中间部分 -->
    <div class="container">
        <div>Bootstrap相关优质项目推荐</div>
        <div>这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的</div>
        <!-- hr是下划线的意思 分割线 -->
        <hr>
        <!-- 写的时候注意层级结构不要一溜烟的挖下写 -->

        <div class="container_body">
            <!-- 都差不多我就复制了 -->
            <div class="item">
                <!-- 首先是一张图片 我随便照一张 大致就这样 -->
                <img src="./image/1.png" alt="">
                <span>Webpack</span>
                <p>是前端资源模块化管理和打包工具</p>
                <p>
                    Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。
                </p>
            </div>
            <div class="item">
                <!-- 首先是一张图片 我随便照一张 大致就这样 -->
                <img src="./image/2.png" alt="">
                <span>Webpack</span>
                <p>是前端资源模块化管理和打包工具</p>
                <p>
                    Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。
                </p>
            </div>
            <div class="item">
                <!-- 首先是一张图片 我随便照一张 大致就这样 -->
                <img src="./image/3.png" alt="image/3">
                <span>Webpack</span>
                <p>是前端资源模块化管理和打包工具</p>
                <p>
                    Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。
                </p>
            </div>
            <div class="item">
                <!-- 首先是一张图片 我随便照一张 大致就这样 -->
                <img src="./image/4.png" alt="">
                <span>Webpack</span>
                <p>是前端资源模块化管理和打包工具</p>
                <p>
                    Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。
                </p>
            </div>
        </div>
    </div>
</body>

</html>